﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <title>Demo for - 'Create a unique Gallery by using z-index and jQuery'</title>
    
    <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>
  </head>
  
  <body>
    <div class="container_12" id="wrapper">
      <div class="grid_8" id="content"><br /><br /><br /><br /><br /><br /><br />
       
        <!-- relevant for the tutorial - start -->
        <div class="grid_6 prefix_1 suffix_1" id="gallery">
          <div id="pictures">
            <img src="images/picture1.png" alt="" />
            <img src="images/picture2.png" alt="" />
            <img src="images/picture3.png" alt="" />
            <img src="images/picture4.png" alt="" />
            <img src="images/picture5.png" alt="" />
          </div>
          
          <div class="grid_3 alpha" id="prev">
            <a href="#previous">&laquo; Previous Picture</a>
          </div>
          <div class="grid_3 omega" id="next">
            <a href="#next">Next Picture &raquo;</a>
          </div>
        </div>
        <!-- relevant for the tutorial - end -->

        
        <div class="clear"></div>
<p><p>可以上翻和下翻，模拟真实翻页的照片展示效果。</p></p>
<p></p>
        <div id="footer">
          (c) 2009 - <a href="http://thisblog.usejquery.com/">This Blog Use jQuery</a>
        </div>
      </div>
      
     
      <div class="clear"></div>
    </div>
  </body>
</html>